<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  1.元素选择器  根据标签的名字确定样式的作用元素
            语法：标签名{}
            缺点：某些同名的元素不希望使用某些样式；某些不同名的元素也使用相同的样式，无法协调

            2.id选择器  根据标签的id值确定样式的作用元素
                       一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
                    语法：#id值{}
                    缺点：id的值有唯一性，样式只能作用在一个元素上
            3.class选择器  根据元素的class属性值确定样式的作用元素
                        元素的class属性值可以重复，而且一个元素的class属性可以有多个值
                    语法：class属性值{}
                       */
        /* 元素选择器 */
        /* input{
            width: 80px;
            height: 40px;
            background-color: aqua;
            color: rgb(127, 228, 195);
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 50px;
        } */

        /* id选择器
        #btn3{
            width: 80px;
            height: 40px;
            background-color: aqua;
            color: rgb(127, 228, 195);
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 50px;
        } */

        .shapeClass{
            width: 80px;
            height: 60px;
            border-radius: 5px;
        }

        .colorClass{
            background-color: blueviolet;
            color: blue;
            border: 6;
        }

        .fontClass{
            font-size: 20px;
            font-family: '隶书';
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮" class="fontClass">
    <input id="btn2" type="button" value="按钮" class="colorClass fontClass shapeClass">
    <input id="btn3" type="button" value="按钮">
    <button>按钮</button>
</body>
</html>